<template>
	<view class="page-view">
		<navBar title="故障处理"></navBar>
		<view class="bgfff mb-16rpx">
			<view class="w-100% h-88rpx flex-space-between">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>处理方案
				</view>
			</view>
			<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
			<view class="flex-space-between ml-48rpx mr-48rpx mt-24rpx pb-35rpx">
				<textarea v-model="faultInfo.proceScheme" :adjust-position="true" show-confirmbar placeholder-style="color:#CACACA" placeholder="请输入处理方案" />
			</view>
		</view>
		<view class="bgfff mb-16rpx pb-40rpx">
			<view class="w-100% h-88rpx flex-space-between">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>维修人员信息
				</view>
			</view>
			<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
			<view class="h-88rpx flex-space-between ml-48rpx mr-48rpx mb-28rpx device-view">
				<view class="w-50% text-view">
					<label for="">人员编号：</label>
					<text class="u-line-1">{{userInfo.userId}}</text>
				</view>
				<view class="w-40% text-view">
					<label for="">人员姓名：</label>
					<text class="u-line-1">{{userInfo.nickName}}</text>
				</view>
			</view>
			<view class="h-88rpx flex-space-between enterInfo-view add-players">
				<view class="flex-wrap-left text-view ">
					<label for="">参与人：</label>
					<view class="flex-wrap-left players-view">
						<u-input v-model="faultInfo.partName" :disabled="true" :type="'text'" placeholder="请选择参与人" @click="modalShow = true"/>
						<view class="flex-space-between input-choose" @click="modalShow=true;getTableInfo();">
							<text>选择</text>
							<image class="w-32rpx h-32rpx qr-img" src="@/static/ic_list_arrow.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bgfff mb-104rpx pb-40rpx">
			<view class="w-100% h-88rpx flex-space-between">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>录入信息
				</view>
			</view>
			<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
			<view class="h-88rpx flex-space-between enterInfo-view">
				<view class="flex-wrap-left text-view ">
					<label for="">是否委派：</label>
					<view class="flex-wrap-left">
						<view class="flex-space-between mr-54rpx ml-30rpx">
							<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-no-checked.png" mode="" v-if="faultInfo.isEntrust == 2" @click="faultInfo.isEntrust = 1"></image>
							<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-checked.png" mode="" v-else></image>
							<text>是</text>
						</view>
						<view class="flex-space-between">
							<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-no-checked.png" mode="" v-if="faultInfo.isEntrust==1" @click="faultInfo.isEntrust = 2"></image>
							<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-checked.png" mode="" v-else></image>
							<text>否</text>
						</view>
					</view>
				</view>
			</view>
			<view class="h-88rpx flex-space-between enterInfo-view" v-if="faultInfo.isEntrust==1">
				<view class="flex-wrap-left text-view ">
					<label for="">委派单位：</label>
					<view class="flex-wrap-left">
						<u-input v-model="faultInfo.entrustInfo" :type="'text'" placeholder="请输入委派单位"/>
					</view>
				</view>
			</view>
			<view class="h-88rpx flex-space-between enterInfo-view">
				<view class="flex-wrap-left text-view ">
					<label for="">是否更换配件：</label>
					<view class="flex-wrap-left">
						<view class="flex-space-between mr-54rpx ml-30rpx">
							<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-no-checked.png" mode="" v-if="faultInfo.isSpare==2" @click="faultInfo.isSpare = 1"></image>
							<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-checked.png" mode="" v-else></image>
							<text>是</text>
						</view>
						<view class="flex-space-between">
							<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-no-checked.png" mode="" v-if="faultInfo.isSpare==1" @click="faultInfo.isSpare = 2"></image>
							<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-checked.png" mode="" v-else></image>
							<text>否</text>
						</view>
					</view>
				</view>
			</view>
			<view class="h-88rpx flex-space-between mb-28rpx enterInfo-view" v-if="faultInfo.isSpare==1">
				<view class="flex-wrap-left text-view ">
					<label for="">配件编号：</label>
					<view class="flex-wrap-left">
						<u-input v-model="faultInfo.spareCode" :type="'text'" placeholder="请输入配件编号"/>
					</view>
				</view>
			</view>
			<view class="h-88rpx flex-space-between enterInfo-view" v-if="faultInfo.isSpare==1">
				<view class="flex-wrap-left text-view ">
					<label for="">配件描述：</label>
					<view class="flex-wrap-left">
						<u-input v-model="faultInfo.spareName" :type="'text'" placeholder="请输入配件描述"/>
					</view>
				</view>
			</view>
		</view>
		<view class="suctionbottom">
			<!-- <view class="yes button" v-if="faultInfo.proceScheme && 
			(faultInfo.isEntrust ==2 || (faultInfo.isEntrust==1 && faultInfo.entrustInfo)) &&
			(faultInfo.isSpare ==2 || (faultInfo.isSpare==1 && faultInfo.spareCode && faultInfo.spareName))" @click="submitBtn">
				提交
			</view> -->
			<view class="yes button" @click="submitBtn">
				提交
			</view>
		</view>
		<!-- 选择参与人 -->
		<u-modal v-model="modalShow" width="702" :mask-close-able="true" :show-title="false" :show-confirm-button="false">
			<view class="modal-content">
<!-- 				<view class="modal-search flex-space-between">
					<view class="search-left flex-wrap-left">
						<image class="w-48rpx h-48rpx  " src="@/static/nav_ic_search.png" mode=""></image>
						<u-input v-model="equpName" placeholder="请输入参与人名称"/>
					</view>
					<text @click="getTableInfo">搜索</text>
				</view> -->
				<view class="tags-container">
					<view class="tags-item" v-for="(item,index) in checkedList" :key="index">
						<text class="text">{{  item.userName }}</text>
						<img @click="handleDel(item.userId)" class="img" src="https://image01.homedo.com/Files/Images/cms/www/20230720/4671644244862073255_pic1.png" alt="">
					</view>
				</view>
				<view class="content-view flex-left">
					<view class="w-100% con-table">
						<view class="w-100% h-88rpx flex-wrap-left t-header">
							<view class="w-20% t-th">
								<view class="w-100%" style="text-align: center;">
									<u-checkbox label='全选' v-model="isAllChecked" @change="allChoose"></u-checkbox>
								</view>
							</view>
							<view class="w-50% t-th">参与人编号</view>
							<view class="w-30% t-th" style="text-align: right;">参与人名称</view>
						</view>
						<scroll-view scroll-y="true" scroll-with-animation :scroll-top="0" style="max-height:440rpx" @touchmove.stop> 
							<view class="t-content" v-if="dataList.items.length>0">
								<view>
									<view class="t-tr flex-wrap-left h-88rpx" v-for="item in dataList.items" :key="item.userId">
										<view class="w-20% t-td" style="text-align: center;">
											<u-checkbox @change="checkboxChange" v-model="item.checked" :key="item.userId"
															:name="item.userId"></u-checkbox>
										</view>
										<view class="w-50% t-td u-line-1">{{ item.userId }}</view>
										<view class="w-30% t-td u-line-1" style="text-align: right;color:#2F7BFF">{{ item.userName }}</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view v-if="dataList.items.length === 0" class="flex-center mt-100rpx mb-100rpx">
					—— 暂无数据 ——
				</view>
				<view class="mt-16rpx flex-wrap-right content-footer">
					<view class="">
						已选择<text>{{checkedList.length}}</text>件
					</view>
					<view class="ml-16rpx submit-btn" @click="submitCheacked()">确定</view>
				</view>
			</view>
			
		</u-modal>
	</view>
</template>

<script setup lang="ts">
import navBar from '@/components/navbar.vue'
import { ref, onMounted,reactive } from 'vue'
import {submitInfo,getPartNameList} from '@/common/api/equpManage'
const props = defineProps<{
	id ?: string|number;
}>()
interface faultInfoModel{
	proceScheme?:string,
	isEntrust?:number|string,
	entrustInfo?:string,
	isSpare?:number|string,
	spareCode?:string|number,
	spareName?:string|number,
	partName?:string|number,
}
const faultInfo = reactive<faultInfoModel>({
	proceScheme:'',//处理方案
	isEntrust:1,//是否委派
	entrustInfo:'',//委派单位
	isSpare:1,//是否更换配件
	spareCode:'',//配件编号
	spareName:'',//配件描述
	partName:'',//参与人
})
//用户信息
const userInfo = ref({
	nickName:'',
	userId:''
})
const modalShow = ref(false);
let dataList = reactive({
	items:[]
});
const equpName = ref('');
const checkedList = ref<any>([]);
const selectList = ref<any>([])
getTableInfo();
async function getTableInfo(): Promise<void> {
	const data = await getPartNameList({
		name: equpName.value,
	})
	dataList.items = data;
	dataList.items.forEach((item)=>{
		checkedList.value.forEach((item1)=>{
			if(item.userId == item1.userId) {
				item.checked = true
			}								
		})
	})
}
const checkboxChange = (e:any)=> {
	dataList.items.map(val => {
		if (val.userId === e.name) {
			val.checked = e.value;
			if(e.value){
				checkedList.value.push(val);
			}else{
				checkedList.value = checkedList.value.filter(function(cur) {return cur.userId !== val.userId});
			}
		}
	})
	let allSelected = dataList.items.every(item => item.checked === true);
	if(allSelected){
		isAllChecked.value = true;
	}else{
		isAllChecked.value = false;
	}
	// checkedDispose()

}
const isAllChecked = ref<boolean>(false)
const allChoose = ()=> {
	isAllChecked.value = !isAllChecked.value
	checkedAll(isAllChecked.value)
}
// 全选
const checkedAll = (e:any)=> {
	dataList.items.map(val => {
		val.checked = e;
	})
	checkedDispose()
}

const checkedDispose = ()=> {
	checkedList.value = dataList.items.filter(item => item.checked);//已选择数据
	//全选联动
	if(checkedList.value.length == dataList.items.length){
		isAllChecked.value = true;
	}else{
		isAllChecked.value = false;
	}
}
//选择提交
const cheackDataCode = ref<any>([]);
const handleDel = (id:number)=>{
	checkedList.value = checkedList.value.filter(function(cur) {return cur.userId !== userId});
	dataList.items.forEach((item)=>{
		if(item.id == id) {
			item.checked = false;
		}
	})
	// 是否全部选中
	let allSelected = dataList.items.every(item => item.checked === true);
	if (allSelected){
		isAllChecked.value = true;
	}else{
		isAllChecked.value = false;
	}
}
const submitCheacked = ()=>{
	if(checkedList.value.length==0){
		uni.showToast({
			title: '请选择数据',
			icon: 'none',
		});
		return
	}
	//取出未添加的数据进行添加
	let diffArr = checkedList.value.filter(v => {
	    return selectList.value.every(e => e.userId != v.userId);
	});
	
	diffArr.map(item=>{
		selectList.value.push(item)
	});
	//取出删除的数据
	let delArr = selectList.value.filter((x) =>  {
		return checkedList.value.every(e => x.userId != e.userId)
		});
	delArr.forEach((item=>{
		let idx = selectList.value.findIndex(f=>f.userId == item.userId);
		selectList.value.splice(idx,1)
	}))
	cheackDataCode.value = selectList.value.map((res)=>{
		return res.userName
	})
	faultInfo.partName = cheackDataCode.value.join(',');
	equpName.value = '';
	modalShow.value = false;
}
onMounted(()=>{
	userInfo.value = uni.getStorageSync('userInfo');
})	
//提交
const submitBtn = ()=> {
	if(!faultInfo.proceScheme){
		uni.showToast({
			title: '请输入处理方案',
			icon: 'none',
		});
		return
	}
	if(faultInfo.isEntrust==1 && !faultInfo.entrustInfo){
		uni.showToast({
			title: '请输入委派单位',
			icon: 'none',
		});
		return
	}
	if(faultInfo.isSpare==1 && !faultInfo.spareCode){
		uni.showToast({
			title: '请输入配件编码',
			icon: 'none',
		});
		return
	}
	if(faultInfo.isSpare==1 && !faultInfo.spareName){
		uni.showToast({
			title: '请输入配件描述',
			icon: 'none',
		});
		return
	}
	let params = {
		...faultInfo,
		id:Number(props.id),
		handleName:userInfo.value.nickName,
		handleCode:userInfo.value.userId,
	}
	submitInfo(params).then(res=>{
		if(res.code===2000){
			uni.showToast({
				title: res.msg,
				icon: 'none',
			});
			uni.redirectTo({
				url: '/pages/homePage/index',
			});
		}
	})
}
</script>

<style lang="scss" scoped>
	.page-view{
		height: 100%;
		overflow-y: auto;
	}
	.bgfff{
		background-color: #fff;
	}
	.navigation-little-title {
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #0F1F2D;
		line-height: 28rpx;
	}
	uni-textarea{
		width: 654rpx;
		height: 118rpx;
	}
	::v-deep .uni-textarea-placeholder{
		// z-index: 9;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #CACACA;
		padding: 20rpx;
	}
	::v-deep .uni-textarea-textarea{
		width: 654rpx;
		height: 118rpx;
		border-radius: 2rpx;
		border: 1rpx solid #DDDDDD;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.uni-textarea-wrapper{
		padding: 20rpx;
		box-sizing: border-box;
	}
	.device-view{
		.text-view{
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #4B4D55;
			label{
				width: 120rpx;
			}
			text{
				display: inline-block;
				max-width: calc(100% - 130rpx);
				vertical-align: text-bottom;
			}
		}
	}
	.enterInfo-view{
		margin-left:48rpx;
		margin-right:48rpx;
		.text-view{
			label{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(30,31,34,0.85);
			}
			text{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0,0,0,0.85);
			}
			::v-deep .u-input{
				width: 534rpx;
				height: 88rpx;
				background: #FFFFFF;
				border-radius: 2rpx;
				border: 1rpx solid #DDDDDD;
				.u-input__input{
					height: 100%;
					padding-left: 24rpx;
				}
				.uni-input-placeholder{
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #CACACA;
				}
			}
		}
		.input-choose{
			position: absolute;
			right: 24rpx;
			text{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #2F7BFF;
			}
		}
	}
	.suctionbottom .button {
		width: 100%;
		height: 88rpx;
		border-radius: 4rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		line-height: 84rpx;
		text-align: center;
	}
	.suctionbottom .no {
		background: #99beff;
		border: 1rpx solid #99beff;
		color: #FFFFFF;
	}
	.suctionbottom .yes {
		background: #2F7BFF;
		border: 1rpx solid #2F7BFF;
		color: #FFFFFF;
	}
	.add-players{
		label{
			padding-left: 24rpx;
		}
	}

	.players-view{
		position: relative;
	}
	::v-deep .u-drawer-content{
		top:auto;
		bottom: 69rpx;
		.u-mode-center-box{
			// border-radius: 16rpx !important;
		}
	}
	.modal-content{
		padding: 24rpx;
		.modal-search{
			height: 88rpx;
			background: #F7F7F7;
			border-radius: 10rpx;
			padding: 16rpx;
			margin-bottom: 10rpx;
			text{
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #2F7BFF;
			}
			.search-left{
				width: calc(100% - 66rpx);
				background-color: #fff;
				border-radius: 6rpx;
				border: 1rpx solid #EEEEEE;
				::v-deep .u-input__input{
					font-size: 24rpx;
				}
				::v-deep .uni-input-placeholder{
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #7D7F88 !important;
				}
			}
		}
		
		.redColor {
			color: #E52B2B !important;
		}
		.t-header{
			border-right: 1rpx solid rgba(0,0,0,0.12);
			.t-th {
				font-size: 26rpx !important;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 400;
				color: rgba(0,0,0,0.85);
				background-color: #f7f7f7;
				padding: 0rpx 20rpx !important;
				height: 88rpx;
				line-height: 88rpx;
				background: #F7F7F7;
				border: 1rpx solid rgba(0,0,0,0.12);
				border-right: 0;
			}
		}
		.t-content{
			.t-tr{
				border-right: 1rpx solid rgba(0,0,0,0.12);
				.t-td {
					font-size: 24rpx !important;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000;
					line-height: 36rpx;
					background-color: #fff;
					height: 88rpx;
					line-height: 88rpx;
					padding: 0rpx 20rpx !important;
					border: 1rpx solid rgba(0,0,0,0.12);
					border-right: 0;
					border-top: 0;
				}
			}
		}
		
		
		.selection-view .u-td,.selection-view .u-th{
			border-right: 0 !important;
			// border-bottom: 1rpx solid rgba(0,0,0,0.12) !important;
		}
		
		.u-checkbox-group {
			width: 100%;
		}
		
		.u-tr {
			width: 100%;
		}
		
		.u-checkbox,
		.u-radio {
			width: 34rpx !important;
			height: 34rpx !important;
		}
		
		.u-radio-group {
			width: 54rpx;
			display: flex;
			justify-content: center;
		}
		
		.interaction>.u-td {
			background-color: #f5f5f5;
		}
		
		
		::v-deep .u-table {
			border-left: 1px solid rgba(0,0,0,0.12) !important;
		}
		.table-tr-group{
			height: 440rpx;
			overflow-y: auto;
		}
		.content-footer{
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0,0,0,0.85);
			
			text{
				color: #2F7BFF;
			}
			.submit-btn{
				width: 112rpx;
				height: 56rpx;
				line-height: 56rpx;
				background: #2F7BFF;
				border-radius: 4rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
	.tags-container {
		// width: 654rpx;
		height: auto;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		margin-left: -16rpx;
		// .tags-item:not(:first-child){
		// 	margin-left: 16rpx;
		// }
	
		.tags-item {
			text-align: center;
			width: fit-content;
			height: auto;
			background: rgba(47,123,255,0.08);
			border-radius: 4rpx;
			border: 1rpx solid #2F7BFF;
			padding-top: 0rpx;
			padding-bottom: 6rpx;
			padding-left: 16rpx;
			padding-right: 16rpx;
			margin-bottom: 16rpx;
			position: relative;
			margin-left: 16rpx;
			.text {
				font-size: 26rpx;
				font-weight: 400;
				color: #2F7BFF;
			}
			.img {
				width: 24rpx;
				height: 24rpx;
				position: absolute;
				top: -10rpx;
				right: -10rpx;
			}
		}
		.tags-item:not(:last-child) {
			margin-left: 16rpx;
		}
	}
</style>
